<!--
 * @description: 菜单列表循环组件
 * @Author: Islands
 * @Date: 2023-08-23 11:45:39
 * @LastEditTime: 2024-03-25 22:08:26
-->
<script lang='ts' setup>
import { IRoutes, IMeta } from '@/axios/login/types.d';
import MenuItem from "./index.vue";
defineProps({
    menuList: { type: Array<IRoutes<IMeta>>, required: true },
    size: { type: Number, default: '1em' }
});

//判断是否为外部连接
const isExternal = (path: string) => {
    const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path);
    return isExternal;
};

</script>
<template>
    <template v-for="(item, index) in menuList">
        <!-- 有次级菜单的,则展开子选项-->
        <el-sub-menu v-if="item.children && item.children.length > 0" :key="index" :index="item.path">
            <template #title>
                <el-icon>
                    <svg-icon :icon="item.meta.icon" :size="size" class="mr-1"/>
                </el-icon>
                 <span class="font-800">{{ item.meta.title }}</span>
            </template>
            <!-- 递归,实现无限级展开 -->
            <menu-item :menuList="item.children" :key="index" :is-nest="true" />
        </el-sub-menu>
        <!-- 没有次级菜单的 -->
        <el-menu-item v-if="item.children != null && item.children.length == 0"
            :index="isExternal(item.path) || item.meta.target ? '' : item.path" :key="index">
            <svg-icon :icon="item.meta.icon" :size="size" class="mr-1" />
            <template #title>
                <!-- if 为外部链接则进行打开新的页面跳转 -->
                <a class="link" v-if="isExternal(item.path)" :href="item.path" target="_blank">
                    <span>{{ item.meta.title }}</span>
                </a>
                <!-- if 为需要打开新页面的路由 -->
                <a class="link" v-else-if="item.meta.target" :href="item.path" target="_blank">
                    <span class="font-800">{{ item.meta.title }}</span>
                </a>
                <!-- 否则 -->
                <span v-else>{{ item.meta.title }}</span>
            </template>
        </el-menu-item>
    </template>
</template>
<style lang='scss'  scoped>
.link {
    color: var(--text-color);
    text-decoration: none
}
</style>